<template>
    <div>
        <el-card>
            <div style="display: flex;justify-content: space-between; align-items: center;">
                <div>
                    <el-input placeholder="请输入编码" size="mini" style="width: 305px;">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div style="display: flex; align-items: center;">
                    <i style="width: 1px; height: 15px; background-color: #a8a8a8;"></i>
                    <el-button type="text" style="margin-left: 10px;">
                        <i class="el-icon-edit"></i>
                    </el-button>
                </div>
            </div>
        </el-card>
        <el-card>
            <div style="display: flex; align-items: center;">
                <i class="el-icon-delete"></i>
                <div style="margin-left: 20px;">订单列表</div>
            </div>
            <div>
                <el-table :data="rutie" border>
                    <el-table-column label="#" type="index" align="center"></el-table-column>
                    <el-table-column label="订单编码" prop="phone">
                        <template slot-scope="{row}">
                            <span style="color: #2a87ff;"> {{ row.phone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单信息" prop="finance"></el-table-column>
                    <el-table-column label="产品信息" prop="freight"></el-table-column>
                    <el-table-column label="客户联系人" prop="compellation"></el-table-column>
                    <el-table-column label="申请金额" prop="sum"></el-table-column>
                    <el-table-column label="申请期限" prop="deadline"></el-table-column>
                    <el-table-column label="订单状态" prop="sign" align="center">
                        <template slot-scope="{row}">
                            <i :style="{ color: row.sign === '待签署' ? '#409eff' : '#00c297' }"
                                class="iconfont icon-point-copy-big"></i>
                            <span>{{ row.sign }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="{row}">
                            <el-button type="text">
                                <i class="iconfont icon--shousuo"></i>
                            </el-button>
                            <el-button type="text">
                                <i class="iconfont icon-duihao" v-if="row.sign === '待签署'"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="display: flex; justify-content: end;">
                <el-pagination background layout="total,  prev, pager, next,  sizes,jumper" :total="400">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            rutie: []
        }
    },
    computed: {
        ...mapState("app", { list: state => state.list })
    },
    created() {
        this.rutie = this.list.splice(0, 3)

    },
}
</script>

<style lang="less" scoped>
/deep/.el-card__body {
    padding: 10px;
}
</style>